<template>
  <!-- prettier-ignore -->
  <el-dialog :visible.sync="visible" :close-on-click-modal="false" width="1000px">
    <div slot="title" class="align-cm">
      <b class="fc-gray10">编辑备注</b>
    </div>
    <el-form :model="form" class="demo-form-inline">
      <el-form-item label="添加备注">
        <el-input type="textarea" rows="4" placeholder="请输入备注内容" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="form.desc.length==0" @click="增加一条()">提交</el-button>
      </el-form-item>
    </el-form>
    <!-- {{ tempDate }} -->
    <!-- {{ tableList }} -->
    <el-table
      size="small"
      style="width: 100%"
      v-loading="loading"
      header-row-class-name="info-row"
      highlight-current-row
      :data="tableList"
      row-key="id">
      <!-- <el-table-column prop="id" label="id" width="100px"> -->
        <!-- <template slot-scope="scope">{{ scope.row.id }}</template> -->
      <!-- </el-table-column> -->
      <el-table-column prop="员工姓名" label="员工姓名" width="100px">
        <template slot-scope="scope">{{ scope.row.realName }}</template>
      </el-table-column>
      <el-table-column prop="备注" label="备注">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEditing"
            v-model="scope.row.remarkEditing" placeholder="备注">
          </el-input>
          <div v-else>{{ scope.row.remarkBody }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="入库时间" label="入库时间" width="180px">
        <template slot-scope="scope">{{ scope.row.addTime }}</template>
      </el-table-column>
      <el-table-column prop="编辑时间" label="编辑时间" width="180px">
        <template slot-scope="scope">{{ scope.row.editTime }}</template>
      </el-table-column>
      <el-table-column prop="操作" label="操作">
        <template slot-scope="scope">
          <template v-if="scope.row.company_Employee_Id == userInfo.company_Employee_Id">
            <el-button type="primary" size="mini" icon="el-icon-edit" v-if="!scope.row.isEditing" @click="准备修改(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" icon="el-icon-check" v-else @click="修改一条(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="删除一条(scope.row)">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="align-rm" ref="pag">
      <!-- prettier-ignore -->
      <el-pagination
        @size-change="handleSizeChange($event,ajaxData);"
        @current-change="handleCurrentChange($event,ajaxData);"
        :current-page="page.current"
        :page-sizes="page.sizes"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
import pagination from '@/mixin/pagination.vue';
import tableList from '@/mixin/tableList.vue';

export default {
  name: 'editorsNote',
  mixins: [tableList, pagination],
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      visible: false,
      tempDate: null,
      form: {
        desc: '',
      },
    };
  },
  computed: {
    ...mapState(['dialog', 'userInfo']),
    arg: function() {
      return {};
    },
  },
  filters: {
    sourceNum2Txt: n => {
      return { 0: '手动录入', 1: '微信同步' }[n];
    },
  },
  methods: {
    init: function(tempDate) {
      this.visible = true;
      this.tempData = tempDate;
      this.$nextTick(() => {
        this.ajaxData();
      });
      // return;
    },
    ajaxData: function() {
      let params = Object.assign(
        {},
        this.$store.getters['userInfo/getEmployee'],
        {
          id: this._.get(this.tempData, 'id', ''),
          scrmId: this._.get(this.tempData, 'id', ''),
          // eS_Company_Id: this._.get(this.tempData, "eS_Company_Id", ""),
          external_userid: this._.get(this.tempData, 'external_userid', ''),
          start: this._.get(this.page, 'page', 1),
          length: this._.get(this.page, 'size', 100),
        },
      );
      this.$api.备注列表
        .getList({}, params)
        .then(res => {
          if (res.code == 200) {
            return Promise.resolve(res.data);
          }
        })
        .then(res => {
          this.page.total = res.recordsTotal;
          this.clearTable();
          res.data.forEach(v => {
            v.isEditing = false;
            v.remarkEditing = v.remarkBody;
            this.addTableRow(v);
          });
        });
    },
    增加一条: function() {
      let arg = Object.assign({}, this.$store.getters['userInfo/getEmployee'], {
        external_userid: this._.get(this.tempData, 'external_userid', ''),
        eS_Company_Id: this._.get(this.tempData, 'eS_Company_Id', ''),
        remarkBody: this._.get(this.form, 'desc', ''),
      });
      this.$api.备注列表.add({}, arg).then(res => {
        if (res.code == 200) {
          this.ajaxData();
          this.form.desc = '';
        }
      });
    },
    准备修改: function(row) {
      row.isEditing = true;
    },
    修改一条: function(row) {
      let arg = Object.assign(
        {
          id: this._.get(row, 'id', 0),
        },
        this.$store.getters['userInfo/getEmployee'],
        {
          external_userid: this._.get(this.tempData, 'external_userid', ''),
          eS_Company_Id: this._.get(this.tempData, 'eS_Company_Id', ''),
          remarkBody: this._.get(row, 'remarkEditing', ''),
        },
      );
      this.$api.备注列表.updata({}, arg).then(res => {
        if (res.code == 200) {
          this.ajaxData();
        }
      });
    },
    删除一条: function(row) {
      let arg = {
        id: this._.get(row, 'id', 0),
      };
      this.$api.备注列表.remove(arg, {}).then(res => {
        if (res.code == 200) {
          this.ajaxData();
        }
      });
    },
    close: function() {
      this.visible = false;
      this.tempData = null;
      this.form.desc = '';
    },
    cancel: function() {
      this.close();
    },
    submit: function() {
      let arg = this.arg;
      this.$api
        .updateRemark(arg)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success',
            });
          }
        })
        .then(() => {
          this.close();
        });
    },
    onSubmit: function() {},
  },
  mounted: function() {
    this.page.size = 5;
    bus.$on('查看备注', e => {
      this.init(e.temp);
    });
  },
  updated: function() {},
};
</script>

<style></style>
